<template>
  <div class="wrap">
	  <WyIcon name="wallet"></WyIcon>
    <div class="content" :style="{transform: 'rotateY(' + r + ')'}">
      <LoginForm :r.sync="r" class="loginform"></LoginForm>
      <FindPwd :r.sync="r" class="findpwd"></FindPwd>
    </div>
  </div>
</template>
<script>
import LoginForm from './loginform'
import FindPwd from './findpwd'
import WyIcon from '@/components/icon'
export default {
  name: 'Login',
  components: {
    LoginForm,
    FindPwd,
	WyIcon
  },
  data () {
    return {
      r: 'deg'
    }
  }
}
</script>

<style scoped lang="less">
  .wrap {
    height: 100vh;
    background: linear-gradient(0deg, #00ffff, #ffffff);
    display: flex;
    perspective: 1000px;
    .content{
      width: 500px;
      height: 300px;
      background: #ffffff;
      margin: auto;
      border-radius: 10px;
      transform-style: preserve-3d;
      position: relative;
      transition: 1s;
      >div{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
      .findpwd {
        transform: rotateY(180deg) translateZ(1px);
      }
      .loginform {
        transform: translateZ(1px);
      }
    }
  }
</style>
